<template>
  <div class="div1">
    <el-tabs v-model="activeName">
      <el-tab-pane label="服务基本信息" name="first">
        <el-row>
          <el-col :span="14">
            <el-descriptions :column="1">
              <el-descriptions-item label="服务URL">{{ item.surfacePlot }}</el-descriptions-item>
              <el-descriptions-item label="服务名称">{{ item.resourceName }}</el-descriptions-item>
              <el-descriptions-item label="可见范围">
                <span class="sn2">{{ item.servRange | filRange }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">
                {{ $XEUtils.toDateString(item.servDate, 'yyyy-MM-dd') }}
              </el-descriptions-item>
              <el-descriptions-item label="发布单位">
                {{ item.servUnit }}
              </el-descriptions-item>
              <el-descriptions-item label="发布地址">
                {{ item.servAddress }}
              </el-descriptions-item>
              <el-descriptions-item label="联系人">
                {{ item.userName }}
              </el-descriptions-item>
              <el-descriptions-item label="联系电话">
                {{ item.phone }}
              </el-descriptions-item>
              <el-descriptions-item label="关键字">
                {{ item.servKeyword }}
              </el-descriptions-item>
              <el-descriptions-item label="预览图">
                <img alt="" :src="item.surfacePlotImg" style="width: 150px;height: 150px">
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="10">
            <el-button type="success" size="mini" @click="mapPreview('1')">预览</el-button>
            <el-button type="success" size="mini" @click="mapPreview('2')">最大化预览</el-button>
            <div id="cesiumDiv_1" ref="cesiumDiv_1" style="width: 500px;height: 500px;"></div>
            <vxe-modal ref="bigMap" v-model="value9" title="地图预览" fullscreen>
              <div id="cesiumDiv_2" ref="cesiumDiv_2"
                   style="width: 100%;height: 100%;background-color: #2A2F3C"></div>
            </vxe-modal>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="详细信息" name="second">
        <el-descriptions :column="1">
          <el-descriptions-item label="是否追加数据">
            <span class="sn2">{{ item.servAdd | filAddDataSource }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="空间数据类型">
            <span class="sn2">{{ item.servDataType | filAddDataType }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="实体形成时间">
            {{ $XEUtils.toDateString(item.servEntityCreated, 'yyyy-MM-dd') }}
          </el-descriptions-item>
          <el-descriptions-item label="实体消失时间">
            {{ $XEUtils.toDateString(item.servEntityDestroy, 'yyyy-MM-dd') }}
          </el-descriptions-item>
          <el-descriptions-item label="数据更新时间">
            {{ $XEUtils.toDateString(item.servDataUpdate, 'yyyy-MM-dd') }}
          </el-descriptions-item>
          <el-descriptions-item label="数据目录">
            {{ item.servSpecial }}
          </el-descriptions-item>
          <el-descriptions-item label="坐标系">
            {{ item.servCoordinate }}
          </el-descriptions-item>
          <el-descriptions-item label="比例尺">
            {{ item.servRatio }}
          </el-descriptions-item>
          <el-descriptions-item label="高程">
            {{ item.servAltitude }}
          </el-descriptions-item>
          <el-descriptions-item label="服务简介">
            {{ item.servDescribe }}
          </el-descriptions-item>
          <el-descriptions-item label="历史版本">
            {{ item.servEdition }}
          </el-descriptions-item>
          <el-descriptions-item label="自定义图标">
            <span class="show-svg-icon">
               <svg v-if="''!==item.iconUrl" class="icon svg-icon" aria-hidden="true">
                 <use :href="item.iconUrl"></use>
               </svg>
             </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="使用帮助" name="third">
        <pdf
            :key="i"
            :page="i"
            v-for="i in numPages"
            :src="loadingTask">
        </pdf>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import {queryAuthorizationService} from '@/api/data_center/resource'

export default {
  name: "ServiceDetails",
  components: {
    pdf
  },
  data() {
    return {
      viewer_1: null,
      viewer_2: null,
      value9: false,
      loadingTask: undefined,
      numPages: undefined,
      activeName: 'first',
      item: {}
    }
  },
  methods: {
    /**
     * {地图初始化}
     * @param box
     * @author: 宋康
     * @date: 2022/10/5 15:50
     */
    initMap(box) {
      const viewer = new Cesium.Viewer(box, {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode //2D 3D转换

      });
      // 文字无遮挡
      viewer.cesiumWidget.creditContainer.style.display = "none";
      viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)
      viewer.scene.globe.baseColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0)
      //
      viewer.scene.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(114.207, 36.401, 50000),
        duration: 0
      });
      return viewer;
    },
    /**
     * {初始化地图}
     *
     * @author: 宋康
     * @date: 2022/10/5 16:45
     */
    initWebGlobe() {
      this.viewer_1 = this.initMap("cesiumDiv_1");
    },
    /**
     * {地图预览}
     * @param type
     * @author: 宋康
     * @date: 2022/10/5 16:46
     */
    mapPreview(type) {
      new Promise((resolve) => {
        if ('2' === type) {
          this.value9 = true;
          if (null == this.viewer_2) {
            setTimeout(() => {
              this.viewer_2 = this.initMap('cesiumDiv_2');
              resolve();
            }, 1000)
          } else {
            resolve();
          }
        } else {
          resolve();
        }
      }).then(() => {
        if (1 === this.$XEUtils.toInteger(this.item.servLimit)) {
          if ('2' === type) {
            this.lookMap(this.viewer_2)
          } else {
            this.lookMap(this.viewer_1)
          }
        } else {
          queryAuthorizationService(this.item.servId).then(res => {
            if (res.status) {
              if (res.data['isAuthorization']) {
                if ('2' === type) {
                  this.lookMap(this.viewer_2)
                } else {
                  this.lookMap(this.viewer_1)
                }
              } else {
                this.$message({
                  message: '当前没有预览权限',
                  type: 'warning'
                });
              }
            } else {
              this.$message({
                message: '当前没有预览权限',
                type: 'warning'
              });
            }
          })
        }
      })
    },
    /**
     * {查看地图}
     *
     * @author: 宋康
     * @date: 2022/10/5 17:04
     */
    lookMap(viewer) {
      let providerWMS = null;
      const servType = this.$XEUtils.toInteger(this.item.servType);
      const servDataType = this.$XEUtils.toInteger(this.item.servDataType);
      if (1 === servType) {
        // 地图
        if (1 === servDataType) {
          // evproj
          const urlMap = this.$mapUrl + '/earthview/rest/services/mapserver/wms';
          providerWMS = new Cesium.WebMapServiceImageryProvider({
            url: urlMap,
            layers: this.item.servDataUrl,
            parameters: {
              serviceName: this.item.servDataUrl,
              transparent: true,
              FORMAT: 'image/png',
              VERSION: '1.0',
              styles: '',
              SRS: 'EPSG:4326',
              TILED: true
            }
          });
        } else if (2 === servDataType) {
          // ETM瓦片
          const urlMap = this.$mapUrl;
          let evLayerManager = new Cesium.EV_LayerManager(viewer.scene);
          evLayerManager.add({
            name: this.item.servDataUrl,
            url: urlMap,
            type: Cesium.EV_LayerType.IMAGE,
            format: "image/png"
          });
        }
      } else if (3 === servType) {
        // 数据服务
        if (2 === servDataType) {
          // shp
          const urlMap = this.$mapUrl + '/earthview/rest/services/vectorserver/wms';
          providerWMS = new Cesium.WebMapServiceImageryProvider({
            url: urlMap,
            layers: this.item.servDataUrl,
            parameters: {
              serviceName: this.item.servDataUrl,
              transparent: true,
              FORMAT: 'image/png',
              VERSION: '1.0',
              styles: '',
              SRS: 'EPSG:4326',
              TILED: true
            }
          });
        } else if (3 === servDataType) {
          // tif
          // const urlMap = this.$mapUrl + '/earthview/rest/services/rasterserver/wmts';
          // providerWMS = new Cesium.WebMapServiceImageryProvider({
          //   url: urlMap,
          //   // layers: this.item.servDataUrl,
          //   parameters: {
          //     serviceName: 'smaller',
          //     service: 'wmts',
          //     request: 'GetTile',
          //     version: '1.0.0',
          //     style: '',
          //     layer: 'smaller',
          //     // tileMatrix: 18,
          //     // tileRow: 92380,
          //     // tileCol: 424835,
          //     FORMAT: 'image/png',
          //     tileMatrixset: 'OGC_WGS84',
          //
          //   }
          // });
        }


      }
      //
      //
      if (null != providerWMS) {
        let image = new Cesium.ImageryLayer(providerWMS);
        viewer.imageryLayers.add(image);
      }
    },
  },
  mounted() {
    let servId = this.$route.query.servId;
    if (!window.sessionStorage.getItem("serviceDetails" + servId)) {
      this.item = this.$route.query.item
      window.sessionStorage.setItem("serviceDetails" + servId, this.$XEUtils.toJSONString(this.$route.query.item))
    } else {
      this.item = this.$XEUtils.toStringJSON(window.sessionStorage.getItem("serviceDetails" + servId))
    }

    setTimeout(() => {
      this.initWebGlobe();
      if (this.item.servApi && this.item.servApi !== '') {
        this.loadingTask = pdf.createLoadingTask(this.item.servApi);
        this.loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages;
        });
      }
    }, 500)
  },
  filters: {
    /**
     * {过滤范围}
     *
     * @author: 宋康
     * @date: 2022/10/5 16:53
     */
    filRange(val) {
      switch (val) {
        case 1:
          return '市';
        case 2:
          return '乡镇';
        case 3:
          return '村';
        default :
          return ''
      }
    },
    /**
     * {过滤数据来源}
     *
     * @author: 宋康
     * @date: 2022/10/5 16:57
     */
    filAddDataSource(val) {
      switch (val) {
        case 1:
          return '新增数据';
        case 2:
          return '追加数据';
        default :
          return ''
      }
    },
    /**
     * {过滤数据类型}
     *
     * @author: 宋康
     * @date: 2022/10/5 17:00
     */
    filAddDataType(val) {
      switch (val) {
        case 1:
          return 'etm';
        case 2:
          return 'shp';
        case 3:
          return 'tif';
        case 4:
          return 'json';
        default :
          return ''
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    /**
     * {离开路由销毁 viewer}
     *
     * @author: 宋康
     * @date: 2022/10/10 17:16
     */
    if (null != this.viewer_1) {
      this.viewer_1.destroy();
      this.viewer_1 = null;
    }

    if (null != this.viewer_2) {
      this.viewer_2.destroy();
      this.viewer_2 = null;
    }
    next();
  }
}
</script>

<style lang="scss" scoped>
.div1 {
  width: 70%;
  margin-left: 15%;
  background-color: #ffffff;
  padding: 20px 20px 20px 20px;
}

.show-svg-icon {
  .icon {
    height: 70px;
    color: #333;
  }

  .svg-icon {
    width: 70px;
    fill: currentColor;
    overflow: hidden;
  }
}

</style>
